<script setup lang="ts">
import { ref, defineExpose } from "vue";
const drawer = ref(false);

const columns = [
  {
    label: "活动名称",
    align: "center",
    prop: "name",
    slot: "name"
  },
  {
    label: "计划完成时间",
    align: "center",
    prop: "money"
  },
  {
    label: "实际完成时间",
    align: "center",
    prop: "money1"
  },
  {
    label: "完成状态",
    align: "center",
    prop: "status", //0位开展 1完成 2延期 3取消 4逾期完成
    slot: "action",
    width: 160
  }
];
const tableData1 = [
  {
    name: "第一期培训",
    money: "2023年1月30日",
    money1: "2023年2月3日",
    status: "0"
  },
  {
    name: "第二期培训",
    money: "2023年2月30日",
    money1: "2023年3月3日",
    status: "1"
  },
  {
    name: "第三期培训",
    money: "2023年3月30日",
    money1: "2023年4月3日",
    status: "2"
  },
  {
    name: "第四期培训",
    money: "2023年4月30日",
    money1: "2023年5月3日",
    status: "3"
  },
  {
    name: "第五期培训",
    money: "2023年5月30日",
    money1: "2023年6月3日",
    status: "4"
  }
];
const dialogVisible = ref(false);
// 0位开展 1完成 2延期 3取消 4逾期完成
const statusTitle = {
  0: { label: "未开展", type: "info" },
  1: { label: "已完成", type: "success" },
  2: { label: "延期", type: "warning" },
  3: { label: "取消", type: "danger" },
  4: { label: "逾期完成", type: "primary" }
};
const openDrawer = () => {
  drawer.value = true;
};
defineExpose({
  openDrawer
});
import infoComponent from "../../carry/infoComponent.vue";
const dialogTitle = ref("");
</script>

<template>
  <el-drawer
    v-model="drawer"
    title="项目活动开展情况 "
    direction="rtl"
    size="600px"
  >
    <pure-table
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
    >
      <template #action="{ row }">
        <el-tag :type="statusTitle[row.status].type">{{
          statusTitle[row.status].label
        }}</el-tag>
        <!-- <el-progress
          :text-inside="true"
          :stroke-width="15"
          stroke-linecap="butt"
          :percentage="row.action"
          :status="statusClick(row.action)"
        /> -->
      </template>
      <template #name="{ row }">
        <el-text
          class="cursor-pointer"
          type="primary"
          @click="
            dialogVisible = true;
            dialogTitle = row.name;
          "
          >{{ row.name }}</el-text
        >
      </template>
    </pure-table>
  </el-drawer>
  <el-dialog
    v-model="dialogVisible"
    :title="`${dialogTitle}开展情况`"
    width="900"
  >
    <infoComponent />
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-progress) {
  .el-progress-bar__outer {
    border-radius: 0;
    overflow-x: visible;
  }
  .el-progress-bar__inner {
    border-radius: 0;
  }
  &.is-exception {
    .el-progress-bar__innerText {
      right: 16px;
      position: relative;
    }
  }
}
</style>
